<template>
  <tm-app ref="app">
    <tm-navbar title="奥集能"></tm-navbar>
    <view>
      <view class="fix-top">
        <headers title="设置" />
        <tag
          tagSize="n"
          :taglist="relationType"
          :tagActive="data.tagActive"
          @btnClick="changeData"
        />
      </view>
    </view>
    <scroll-view
      scroll-y="true"
      class="scroll-Y person-list"
      :refresher-enabled="true"
      @refresherrefresh="refresher"
      :refresher-triggered="data.triggered"
    >
      <personList :setList="data.listInfo" @btnClick="goMenu"></personList>
    </scroll-view>
    <!-- <operateList
      class="person-list"
      :relationData="relationData"
    ></operateList> -->
  </tm-app>
</template>

<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app'
import headers from '../../components/header/header.vue'
import tag from '../../components/tag/index.vue'
import * as config from './config/menuOperate'
import personList from './components/personList.vue'
// import operateList from './components/operateList.vue'
import { onMounted, ref, reactive } from 'vue'
import { relationType } from './config/config'
import relation from './common/relation'
import OrgCtrl from '@/ts/controller'

//获取常用操作数据
let relationData = ref<any>([])
const getData = async () => {
  relationData.value = relation.getRelation()
}

const data = reactive<any>({
  listInfo: [],
  tagActive: 'all',
  triggered: false
})
async function getList() {
  const res = await config.loadSettingMenu()
  uni.showLoading({ title: '加载中...' })
  if (res) {
    // data.setList = res.children
    const arr: {
      label: any
      key: any
      itemType: any
      icon: any
      remark: any
      isShow: boolean
    }[] = []
    res.children.forEach(
      (element: {
        label: any
        key: any
        item: {
          target: { metadata: { typeName: any } }
          share: { avatar: { thumbnail: any } }
          id: any
        }
        remark: any
      }) => {
        const obj = {
          label: element.label,
          key: element.key,
          itemType: element.item.id === OrgCtrl.user.id ? '个人' : element.item.target.metadata.typeName,
          icon: element?.item?.share?.avatar?.thumbnail,
          remark: element.remark,
          isShow: true
        }
        arr.push(obj)
      }
    )
    if(data.tagActive === 'person') {
      data.listInfo =  arr.filter(item => item.itemType == '个人')
    }else if(data.tagActive === 'company') {
      data.listInfo =  arr.filter(item => item.itemType === '单位') 
    }else{
      data.listInfo = arr
    }
    uni.hideLoading()
  }
}
async function goMenu(item: { key: any; label: any,itemType: any,icon: any }, type: string) {
  const params = {
    key: item.key,
    label: item.label,
    itemType: item.itemType,
    icon: item.icon
  }
  if(type === 'menuDetail'){
    uni.navigateTo({
      url: '/pages/relation/member/memberIndex?item=' + JSON.stringify(params)
    })
  }else{
    if(item.itemType === '单位'){
      uni.navigateTo({
        url: '/pages/relation/group/groupMenu?item=' + JSON.stringify(params)
      })
    }else {
      uni.navigateTo({
        url: '/pages/relation/member/memberMenu?item=' + JSON.stringify(params)
      })
    }
  }
}
async function changeData(item: { code: string }) {
  data.tagActive = item.code
  getList()
}

// 下拉刷新
function refresher() {
  if (!data.triggered) {
    data.triggered = true
    getList()
    setTimeout(() => {
      data.triggered = false
    }, 1000)
  }
}
onShow(() => {
  getList()
})
onMounted(() => {
  getData()
})
</script>

<style scoped>
.fix-top {
  position: fixed;
  background: #fff;
  z-index: 1;
}
.person-list {
  margin-top: 98px;
}
</style>
